<template>
  <div id="echart2" style="height: 80vh; width: 100%;"></div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watch, nextTick ,shallowRef} from "vue";
import * as echarts from 'echarts';

let props = defineProps({
  dataList: {
    type: Array,
    required: true
  },
});

const myChart2 = shallowRef(null); // ECharts 实例

// 图表配置
const option = {
  tooltip: {
	  show: true, // 关闭 tooltip
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)', // 显示百分比
  },
  legend: {
	  show:false,
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: '部门人员分布',
      type: 'pie',
      radius: ['50%', '70%'], // 调整半径
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: true,
        position: 'outside', // 标签位置
        fontSize: 16, // 标签字体大小
        formatter: '{b}: {c} ({d}%)', // 标签内容
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 24, // 放大强调时的字体
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: true, // 显示标签线
      },
      data: []
    }
  ]
};

// 创建 ECharts 实例
const createChart = () => {
  if (!myChart2.value) {
    myChart2.value = echarts.init(document.getElementById('echart2'));
  }
};

const updateChart = () => {
  const data = props.dataList.map(item => ({
    name: item.name,
    value: item.value
  }));
  
  // 设置数据
  option.series[0].data = data.length > 0 ? data : [{ name: '无数据', value: 100 }];
  myChart2.value.setOption(option); // 更新图表配置
};

const handleResize = () => {
  if (myChart2.value) {
    myChart2.value.resize(); // 调整图表尺寸
  }
};

onMounted(async () => {
  await nextTick(); // 等待 DOM 更新
	createChart(); // 初始化图表
	updateChart(); // 初始加载数据
	handleResize(); // 确保图表尺寸正确
  window.addEventListener('resize', handleResize); // 添加窗口调整大小监听
});

// 监视 dataList 的变化
watch(
  () => props.dataList,
  (newVal) => {
    if (newVal && newVal.length > 0) {
      updateChart(); // 当 dataList 发生变化时更新图表
    }
  },
  { immediate: true } // 组件挂载时也触发一次
);

// 组件卸载前清理 ECharts 实例
onBeforeUnmount(() => {
  if (myChart2.value) {
    myChart2.value.dispose(); // 销毁实例
    myChart2.value = null;
  }
  window.removeEventListener('resize', handleResize); // 移除事件监听
});

const intervalId = setInterval(handleResize, 200);

</script>

<style lang="scss" scoped>
#echart2 {
  height: 80vh;
  width: 100%;
}
</style>
